<template>
    <el-container class="st-width-100-pc st-height-100-pc">
        <el-header style="height:auto;">
            <StElDynamicForm
                  ref="form"
                  :origin-prop="{inline: true,labelWidth: '100px'}"
                  :options="formItems"
                  :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form,data)=>{queryParams = $stObjectTools.clone(data)}}"
            >
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                               @click="toAddPage" size="mini">添加
                    </el-button>
                </template>
            </StElDynamicForm>
        </el-header>
      <el-main>
          <StElTable
                 ref="table"
                 :options="columns"
                 @loading="(val)=>{searchLoading = val}" :datas="tableDatas" :query-params="queryParams"
          >
              <template #append>
                  <el-table-column
                          label="操作"
                          width="200">
                      <template #default="{row,column,$index}">
                          <StElButtonGroup :group-param="{row,column,$index}" :operationMoreButtonOptions="{stype: 'link'}" :operations="tableOperations">
                          </StElButtonGroup>
                      </template>
                  </el-table-column>

              </template>
          </StElTable>
      </el-main>

    </el-container>
</template>

<script>

    let types = {
        image: '图片',
        video: '视频',
        voice: '语音',
        thumb: '缩略图',
    }
    import MpUrl from '../../MpUrl.js'
    export default {
        components:{
        },
        computed: {
            tableDatas() {
                if(!this.queryParams.appCode || !this.queryParams.type){
                    return null
                }
                return this.$stStringTools.replaceb(MpUrl.PermanentOtherListPage, this.queryParams)
            }
        },
        data(){
            return {
                queryParams: {},
                searchLoading:  false,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },

                    {
                        field: {
                            name: 'type'
                        },
                        element:{
                            type: 'select',
                            options:{
                                // 自调用函数
                                datas:(()=>{
                                    let r = []
                                    for (let id in types){
                                        r.push({
                                            id: id,
                                            name: types[id]
                                        })
                                    }
                                    return r
                                })()
                            },
                            required: true,
                            label: '类型',
                        }
                    },

                ],
                columns:[
                    {
                        prop: 'mediaId',
                        label:'媒体id',

                    },
                    {
                        prop: 'name',
                        label:'名称'
                    },
                    {
                        prop: 'updateTime',
                        label:'更新时间'
                    },
                    {
                        prop: 'url',
                        label:'url',
                    },
                ],
                tableOperations:[
                    {
                        requestSuccess: ({groupParam}) => {
                            // 删除当前行，不重新请求
                            this.$refs.table.getTableData().splice(groupParam.$index, 1)
                        },
                        action: ({groupParam}) => {
                            return {
                                method: 'delete',
                                url: this.$stStringTools.replaceb(MpUrl.PermanentOtherDelete, {appCode: this.queryParams.appCode,mediaId: groupParam.row.mediaId}),
                                confirmText: `确定删除 ${groupParam.row.name}吗`
                            }
                        },
                        stype: 'link',
                        label:'删除'
                    }
                ]
            }
        },
        methods: {
            getAppCode(){
                return this.$refs.form.getFormData().appCode
            },
            getType(){
                return this.$refs.form.getFormData().type
            },
            ensureAppCodeAndType() {
                if(!this.getAppCode() || !this.getType()){
                    this.$message.error('请选择公众号和类型')
                    return false
                }
                return true
            },
            toAddPage(){
                if(this.ensureAppCodeAndType()){
                    this.$router.push({path: MpUrl.router.PermanentMaterialOtherAdd, query: {appCode:this.getAppCode(),type: this.getType()}})
                }
            },
        }
    }
</script>

<style scoped>

</style>